Secciones y líneas generales de un documento HTML5.
Publicado por José Maldonado el 16 de marzo de 2018.
La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el perfil de cualquier documento.
Problemas resueltos por HTML5
La definición de la estructura de un documento en HTML 4 y su algoritmo de perfilado es muy tosco y genera numerosos problemas:
- HTML5 quita la necesidad de elementos <div> para definir secciones semánticas sin definir valores específicos para los atributos class, introduciendo un nuevo elemento, <section>, el elemento de sección HTML.
- Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal. Esto se resuelve en HTML5 con los elementos de seccionado (<article>, <section>, <nav> y <aside>) son siempre subsecciones de su sección ancestral más cercana.
- HTML5 introduce el elemento <hgroup> que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> crea el perfil 1. Justine).
- Un documento puede tener secciones especiales conteniendo información relacionada que no es parte del flujo principal. HTML5 introduce el elemento<aside> permitiendo a dichas secciones no ser parte del perfil principal.
- Hay información relacionada no al documento pero si al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: <nav> para colecciones de enlaces, como una tabla de contenidos, <footer> y <header> información relacionada con el sitio.
De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los perfiles del documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.
Estructura básica de una página HTML5
Un documento web (o página web) es un conjunto de tags HTML que se escriben en un editor de texto plano (sin formato) y se ejecutan en un navegador web.
<!DOCTYPE html>
<html>
<head>
Información técnica sobre el documento.
Esta información no es visible para el usuario de la página.
A excepción del título que se define en esta sección con el tag <title>.
</head>
<body>
Contenido que aparece en el documento....
</body>
</html>
<!DOCTYPE html> Como se puede observar en el ejemplo anterior, una página web escrita en HTML5 comienza con la definición DTD, que de su nombre en inglés, estas siglas significan Definición del Tipo de Documento (Document Type Definition). Esta línea contiene un tag que es altamente recomendable utilizarla para indicar a los navegadores webs qué estándares serán utilizados para mostrar el contenido de la página. En el ejemplo que se muestra, el DTD que se especifica es para una página escrita para HTML5. Para saber más acerca de los tipos de documentos en la web visita: Akus Diseño Web.
<html> El elemento HTML o elemento HTML raiz (root element), representa la raiz de todo el documento HTML. El resto de elementos que están presentes en un documento HTML son hijos o desciendientes del elemento <html>.
A pesar de que esta etiqueta puede ser implícita, o no requerida en HTML, sí es requerida para abrir y cerrar en XHTML. Este elemento se cierra al final del documento HTML con </html>. Leer más en la MDN de Mozilla...
<head> HEAD traducido del ingles al español significa "cabeza", por eso a esta parte del documento la llamamos cabecera. En el documento HTML comienza con la etiqueta <head> y se indica su final con la etiqueta </head>, se escribe así:
<!DOCTYPE html>
<html>
<head>
En esta parte se escribe la
información técnica sobre el documento....
</head>
<body>
Contenido que aparece en el documento....
</body>
</html>
Un ejemplo de <head> podría ser el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web de ejemplo HTML CSS JQUERY"/>
<link rel="stylesheet" href="estilos.css" />
<link rel="manifest" href="manifest_file.json" />
<title>Título del sitio web</title>
</head>
El HEAD es la parte donde se incluye la información acerca del documento, podríamos atrevernos a decir que el HEAD es una sección de un documento HTML meramente "técnica e informativa", pues la mayoría de esta información no la muestra el navegador al usuario e inclusive pudiéramos dejarla vacía y esto no afectaría al funcionamiento o la forma en que se visualiza la página, y si bien el HEAD de un documento HTML pudiera ir vacío siempre es mejor darles la suficiente importancia a las etiquetas que el HEAD contiene, mucho más aún si nuestro objetivo es publicar nuestro trabajo en la web, pues muchas de las etiquetas del HEAD son importantes para los buscadores y para un buen posicionamiento en los resultados de búsqueda. Para obtener mayor información acerca de <head>, sus atributos y propiedades revisa este documento...
BODY: El cuerpo (<body>) de un documento HTML es la parte central de una página web. Éste se define por medio de la etiqueta <body>. De las dos partes en que se divide un documento HTML (<head> y <body>), esta última es la etiqueta usada para indicar el cuerpo de un documento HTML, es la parte donde se describe el contenido de la página (su estructura, su forma, sus colores, texto, y todo lo visual), su inicio lo indica la etiqueta <body> y su final con la etiqueta de cierre </body>.
El BODY de un documento web suele subdividirse en encabezado (<header>) y en contenido principal, indicado con algunas de las siguientes etiquetas <main>, <section> o <div>. En HTML5, también se puede indicar una sección para contenido secundario o complementario, a través de la etiqueta semántica <aside>, así como el final o pie del documento, mediante la etiqueta <footer>. Leer más...
El algoritmo de perfilado de HTML5
Definiendo secciones en HTML5
Todo el contenido incluido dentro del elemento <body> es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento <body>, los límites de la sección son definidos explícita o implícitamente. Las secciones definidas explícitamente son el contenido definido en las etiquetas <body>, <section>, <article>, <aside>, <footer>, <header>, y <nav>.
Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento <h1>. Consulte también Definiendo cabeceras en HTML5 en la documentación de Mozilla.
Ejemplo:
<section>
<h1>Elefantes selváticos</h1>
<section>
<h1>Introdución</h1>
<p>En esta sección hablaremos de los elefantes menos conocidos, los elefantes selváticos.</p>
</section>
<section>
<h1>Habitat</h1>
<p>Los elefantes selváticos no viven en los árboles sino entre ellos</p>
</section>
<aside>
<p>Publicidad</p>
</aside>
</section>
<footer>
<p>(c) 2010 Centro de estudios naturales</p>
</footer>
</body>
</html>
Los tags o etiquetas en HTML5
Los tags en HTML5 son los elementos que se utilizan para definir la estructura y el contenido de un documento web. Cada tag está formado por una etiqueta de apertura y otra de cierre, que encierran el contenido del elemento. Por ejemplo, el tag <p> define un párrafo de texto, y se escribe así: <p>Este es un párrafo</p>. Algunos tags no tienen contenido, y se escriben con una sola etiqueta que termina con una barra (/). Por ejemplo, el tag <br> define un salto de línea, y se escribe así: <br />.
Existen diferentes tipos de tags en HTML5, según su función y su significado semántico. Algunos de los más importantes son:
- Tags iniciales o de raíz: son los que definen el tipo de documento y la raíz del mismo. Son los tags <!DOCTYPE html> y <html>, respectivamente.
- Tags de metadatos: son los que proporcionan información sobre el documento, como su título, su idioma, sus estilos o sus scripts. Son los tags <head>, <title>, <meta>, <link>, <style> y <script>.
- Tags de seccionamiento: son los que organizan el contenido del documento en secciones lógicas, como el encabezado, el pie de página o el cuerpo principal. Son los tags <body>, <header>, <footer>, <main>, <nav>, <section> y <article>.
- Tags de encabezados: son los que definen los títulos o subtítulos de las secciones del documento. Son los tags <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
- Tags de texto: son los que definen el contenido textual del documento, como párrafos, listas, tablas, enlaces o imágenes. Son los tags <p>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <a>, <img> y muchos más.
- Tags de formulario: son los que definen los elementos interactivos del documento, como campos de entrada, botones o menús desplegables. Son los tags <form>, <input>, <button>, <select> y otros.
Tour por algunos de los tags o etiquetas más relevantes en el curso de HTML5
La etiqueta anchor en HTML se utiliza para crear un enlace a otra página web, archivo o ubicación dentro de la misma página. El elemento anchor se escribe con la etiqueta <a> y tiene un atributo href que indica la dirección del recurso al que se quiere enlazar. Por ejemplo:
: El elemento ancla - HTML: Lenguaje de etiquetas de hipertexto | MDN
Este código crea un enlace al sitio web de MDN que explica el uso del elemento ancla. El texto que aparece entre las etiquetas <a> y </a> es el que se muestra como el enlace en la página web. Se puede usar cualquier texto o elemento que acepte contenido de párrafo o de flujo, excepto otro elemento <a>.
Los enlaces pueden ser absolutos o relativos, dependiendo de si se especifica la dirección completa del recurso o solo una parte. Los enlaces absolutos son útiles para enlazar a recursos de otros sitios web, mientras que los enlaces relativos son útiles para enlazar a recursos dentro del mismo sitio web.
Los enlaces también pueden tener otros atributos opcionales, como download, target, rel o title, que modifican el comportamiento o la información del enlace. Por ejemplo, el atributo download indica al navegador que descargue el recurso en lugar de navegar hacia él, y el atributo title proporciona un texto alternativo que se muestra al pasar el cursor sobre el enlace.